<template>
    <div v-if="broadcasts.length > 0" style="width:100%;margin:4px auto;height:160px;background: #fff;">
        <div class="swiper-container">
            <swiper :options="swiperOption" ref="mySwiper">
                <template v-for="broadcast in broadcasts">
                    <swiper-slide v-if="broadcast.img">
                        <router-link :to="broadcast.url">
                            <img :src="concat(broadcast.img)" :style="{width:broadcast.width ? broadcast.width:''}">
                        </router-link>
                        <!--<div style="height: 150px;position: absolute;left: 0;bottom: 0;overflow: auto">-->
                            <!--<div style="height: 30px;" v-for="value in 150">111111111</div>-->
                        <!--</div>-->
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </template>
            </swiper>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import vueSwiper from 'vue-awesome-swiper'

    Vue.use(vueSwiper);
    export default {
        props: {
            broadcasts: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {
                swiperOption: {
                    pagination: {
                        el: '.swiper-pagination',
                        // clickable: true,
                    },
                    loop: true,
                    autoplay: 3000,//等同于以下设置

                    // direction: 'vertical',
                    // autoHeight:true,
                    // autoplay: {
                    //     delay: 5000,
                    //     stopOnLastSlide: false,
                    //     disableOnInteraction: true,
                    // },
                }
            }
        },
        mounted(){
            // this.$refs.mySwiper.swiper.slides.on('touchmove', function (e) {
            //     e.stopPropagation();
            // },false)
        },
        methods: {
            concat(img) {
                return this.systemImgServer + img
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import url($css_root + 'css/swiper.min.css');

    img {
        width: 94%;
        height: 150px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        object-fit: cover;
    }

    .swiper-container {
        height: 160px;
    }
</style>
